<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Exception Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link rel="stylesheet" type="text/css"
	href="<c:url value="/assets/css/themes/base/jquery-ui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/assets/jquery.jqGrid-4.4.3/css/ui.jqgrid.css"/>">

<link rel="stylesheet"
	href="<c:url value="/assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css"/>">
<link rel="stylesheet"
	href="<c:url value="/assets/css/font-icons/entypo/css/entypo.css"/>">
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
<link rel="stylesheet" href="<c:url value="/assets/css/bootstrap.css"/>">
<link rel="stylesheet" href="<c:url value="/assets/css/neon-core.css"/>">
<link rel="stylesheet"
	href="<c:url value="/assets/css/neon-theme.css"/>">
<link rel="stylesheet"
	href="<c:url value="/assets/css/neon-forms.css"/>">
<link rel="stylesheet" href="<c:url value="/assets/css/custom.css"/>">
<link rel="stylesheet" href="<c:url value="/assets/css/white.css"/>">
<link rel="stylesheet" href="<c:url value="/assets/css/override.css"/>">
<link rel="stylesheet" href="<c:url value="/assets/css/fonts.css"/>">

<script src="<c:url value="/assets/js/jquery-1.11.0.min.js"/>"></script>



<style type="text/css">
html,body {
	font-size: 75%;
}
</style>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript"
	src="<c:url value="/assets/js/jquery-ui/js/jquery-ui-1.10.3.custom.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/assets/jquery.jqGrid-4.4.3/js/i18n/grid.locale-en.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/assets/js/common.js"/>"></script>
<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script type="text/javascript"
	src="<c:url value="/assets/jquery.jqGrid-4.4.3/js/jquery.jqGrid.src.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/assets/scripts/knockout-3.0.0.js" />"></script>

<script type="text/javascript">
	//<![CDATA[
	/*global $ */
	/*jslint browser: true, nomen: true */
	var baseUrl = '../EZOPSDashboardUI';
	$(document)
			.ready(
					function() {
						$("#list")
								.jqGrid(
										{
											url : '/EZOPSDashboardUI/getexceptionreport?clientid=CITI&assetclass=bond',
											datatype : 'json',
											colModel : [
											//{name: 'id', index: 'id', width: 45, align: 'center', sorttype: 'int', frozen: true},
											{
												name : 'fileName',
												label : 'fileName',
												width : 70,
												align : 'center'
											}, {
												name : 'assetId',
												label : 'assetId',
												width : 100,
												align : 'center'
											}, {
												name : 'tradeId',
												label : 'tradeId',
												width : 75,
												formatter : 'text',
												align : 'center',
												key : true
											}, {
												name : 'timeStamp',
												label : 'timeStamp',
												width : 100,
												align : 'center',
												sorttype : 'date',
												formatter : 'date',
												formatoptions : {
													newformat : 'm/d/Y'
												},
												datefmt : 'm/d/Y'
											}, {
												name : 'fieldName',
												label : 'fieldName',
												width : 100,
												align : 'center'
											}, {
												name : 'action',
												label : 'action',
												width : 100,
												align : 'center',
												formatter : 'text'
											}, {
												name : 'errorMessae',
												label : 'error',
												width : 100,
												formatter : 'text',
												align : 'left'
											} ],
											rowList : [ 5, 10, 20 ],
											pager : '#pager',
											loadonce : true,
											postData : "",
											prmNames : {
												nd : null
											},
											gridview : true,
											jsonReader : {
												repeatitems : false,
												root : function(obj) {
													return obj;
												}
											},
											onSelectRow : function(id) {
												var getID = $(this).jqGrid(
														'getCell', id,
														'tradeId');
											},
											sortable : function(permutation) {
												alert('permutation='
														+ permutation.join(','));
											},

											caption : 'Exceptions Generated',
											height : 'auto'
										})
								.jqGrid(
										'sortableRows',
										{
											update : function(ev, ui) {
												var item = ui.item[0], ri = item.rowIndex, itemId = item.id, message = "The row with the id="
														+ itemId
														+ " is moved. The new row index is "
														+ ri;
												/* if (ri > 1 && ri < this.rows.length - 1) {
												    alert(message + '\nThe row is inserted between item with rowid=' +
												        this.rows[ri-1].id + ' and the item with the rowid=' +
												        this.rows[ri+1].id);
												} else if (ri > 1) {
												    alert(message +
												        '\nThe row is inserted as the last item after the item with rowid=' +
												        this.rows[ri-1].id);
												} else if (ri < this.rows.length - 1) {
												    alert(message +
												        '\nThe row is inserted as the first item before the item with rowid=' +
												        this.rows[ri+1].id);
												} else {
												    alert(message);
												} */
											}
										});

						//]]>

						/*------------------------------------------------------------------------------------------
						 *------------------------------------KNOCKOUT CODE STARTS----------------------------------
						 *--------------------------------------------------------------------------------------------
						 */
						var model = model || {};
						var loginUser = ko.observable("");

						//------------------------------------Report Model -------------------------------------

						model.reportData = function(data) {
							var self = this;
							self.reportId = ko.observable(data.reportId);
							self.fileName = ko.observable(data.fileName);
							self.category = ko.observable(data.category);
							self.reportDesc = ko.computed(function() {
								var reportType = null;
								switch (data.category) {
								case 'pl':
									reportType = "P&L Summary";
									break;
								case 'recon':
									reportType = "Reconciliation";
									break;
								case 'var':
									reportType = "Var";
									break;
								case 'risk':
									reportType = "Risk";
									break;
								case 'acct':
									reportType = "Accounting";
									break;
								case 'cash':
									reportType = "Cash";
									break;
								case 'trade':
									reportType = "Trade Report";
									break;
								case 'aging':
									reportType = "Aging Report";
									break;
								case 'poscp':
									reportType = "Positions by CP";
									break;
								case 'posprd':
									reportType = "Positions by Product";
									break;
								case 'investor':
									reportType = "Investor Report";
									break;
								default:
									reportType = "Report";
								}
								return reportType;
							});

							self.fileData = ko.observable(data.fileData);
							self.fileLocation = ko.computed(function() {
								return data.fileLocation.replace(/\\/g, "/");
							});
							self.groupId = ko.observable(data.groupId);
							self.asOfDate = ko.computed(function() {

								var date = new Date();
								date.setTime(ko.toJS(data.asOfDate));

								return (date.getMonth() + 1) + "/"
										+ date.getDate() + "/"
										+ date.getFullYear();

							});

							return self;
						};

						//------------------------------------Group Model -------------------------------------
						model.groupData = function(data) {
							var self = this;

							self.groupId = ko.observable(data.groupId);
							self.groupName = ko.observable(data.groupName);
							self.parentGroupId = ko
									.observable(data.parentGroupId);

							return self;
						};

						//------------------------------------Page Resource Model -------------------------------------

						model.pageData = function(data) {
							var self = this;

							self.resourceId = ko.observable(data.resourceId);
							self.resourceType = ko
									.observable(data.resourceType);
							self.groupId = ko.observable(data.groupId);
							self.fileName = ko.observable(data.fileName);

							return self;
						};

						//-------------------------------------Functions Definitions---------------------------
						model.dashboardFunctions = function() {
							asOfDate = ko.observable();
							groupList = ko.observableArray();
							pageList = ko.observableArray();
							reportListAll = ko.observableArray();
							reportList = ko.observableArray();
							reportCheck = ko.observable({
								'pl' : ko.observable(true),
								'var' : ko.observable(true),
								'acct' : ko.observable(true),
								'cash' : ko.observable(true),
								'recon' : ko.observable(true),
								'coll' : ko.observable(true),
								'aging' : ko.observable(true),
								'poscp' : ko.observable(true),
								'posprd' : ko.observable(true),
								'trade' : ko.observable(true),
								'risk' : ko.observable(true),
								'investor' : ko.observable(true)
							});

									openPdf = function(data) {

										window
												.open(
														"<c:url value='assets/sampledata/"
																+ ko
																		.toJS(data.fileName)
																+ "' />",
														'_blank',
														'fullscreen=yes');

									},
									getAllReport = function() {
										var dateRange = new String($(
												"#dateRange").val());
										var dates = dateRange.split(" to ");

										console.log(">>" + dates[0] + "<<");
										console.log(">>" + dates[1] + "<<");

										var cat = null;//" " ; //--p1
										$
												.ajax({
													url : baseUrl
															+ '/getAllReportIds/${userId}/'
															+ cat + '/'
															+ dates[0] + '/'
															+ dates[1],
													type : 'GET',
													dataType : 'json',
													success : function(data) {

														var mappedData = $
																.map(
																		data,
																		function(
																				row) {

																			return new model.reportData(
																					row);
																		});

														reportListAll(mappedData);
														console
																.log(ko
																		.toJSON(reportListAll));

													},
													error : function(data) {

														console
																.log("Error Response Text : "
																		+ data);

													}

												});

									},

									onLoad = function() {

										loginUser('${userId}');
										console.log(ko.toJS(loginUser));
										console
												.log("-------------------------Getting Lists-------------------------");

										//-----ajax request to fetch Page list--------------------

										$
												.ajax({
													url : baseUrl
															+ '/userResources/${userId}/Page',
													type : 'GET',
													dataType : 'json',
													success : function(data) {

														var mappedData = $
																.map(
																		data,
																		function(
																				row) {

																			return new model.pageData(
																					row);
																		});

														pageList(mappedData);

													},
													error : function(data) {

														console
																.log("Error Response Text : "
																		+ data);

													}

												});

										//-----ajax request to fetch Reports list--------------------
										var cat = null;//" " ; //--p1
										$
												.ajax({
													url : baseUrl
															+ '/getReportIds/${userId}/'
															+ cat,
													type : 'GET',
													dataType : 'json',
													success : function(data) {

														var mappedData = $
																.map(
																		data,
																		function(
																				row) {

																			return new model.reportData(
																					row);
																		});

														reportList(mappedData);
														console
																.log(ko
																		.toJSON(reportList));
														asOfDate(ko
																.toJS(reportList()[0].asOfDate));
														console
																.log(ko
																		.toJS(asOfDate));
														setTimeout(
																function() {

																	$(
																			"#sortable")
																			.sortable();
																	$(
																			"#sortable")
																			.disableSelection();

																}, 500);

													},
													error : function(data) {

														console
																.log("Error Response Text : "
																		+ data);

													}

												});

										//-----ajax request to fetch GROUP list--------------------
										$
												.ajax({
													url : baseUrl
															+ '/getAllGroups',
													type : 'GET',
													dataType : 'json',
													success : function(data) {

														var mappedData = $
																.map(
																		data,
																		function(
																				row) {

																			return new model.groupData(
																					row);
																		});

														groupList(mappedData);

													},
													error : function(data) {

														console
																.log("Error Response Text : "
																		+ data);

													}

												});

									}
							return {

								onLoad : onLoad,
								openPdf : openPdf,
								getAllReport : getAllReport
							}

						}();

						ko.applyBindings(model.dashboardFunctions);
						model.dashboardFunctions.onLoad();
						/*------------------------------------------------------------------------------------------
						 *-------------------------------------KNOCKOUT CODE ENDS------------------------------------
						 *--------------------------------------------------------------------------------------------
						 */

					});
</script>
</head>
<body class="page-body" onLoad="loadForms()">
	<div class="page-container white page-left-in">
		<div class="sidebar-menu">
			<header class="logo-env">
			<div class="logo">
				<a href="index.html"> <img
					src="<c:url value="/assets/images/logo@2x.png"/>" width="120"
					alt="" />
				</a>
			</div>
			<div class="sidebar-collapse">
				<a href="#" class="sidebar-collapse-icon with-animation"> <i
					class="entypo-menu"></i>
				</a>
			</div>
			<div class="sidebar-mobile-menu visible-xs">
				<a href="#" class="with-animation"> <i class="entypo-menu"></i>
				</a>
			</div>
			</header>
			<div class="sidebar-user-info">
				<span class="user-link"> <a href=""
					data-target="#profilePicModal" data-toggle="modal"
					title="Change Image"> <i class="entypo-cog right"></i>
				</a> <img src="<c:url value="/assets/images/${pic}"/>" alt=""
					class="img-circle" width="44px" height="44px"> <span>Welcome,</span>
					<strong>${user}</strong>
				</span>
			</div>
			<ul id="main-menu">
				<li id="search" class="">
					<form action="" method="get">
						<input type="text" placeholder="Search something..."
							class="search-input" name="q">
						<button type="submit">
							<i class="entypo-search"></i>
						</button>
					</form>
				</li>
				<!-- ko foreach: pageList -->
				<li class="active"
					data-bind="css : { 'active' : ko.toJS(fileName)=='dashboard'}">
					<a data-close-others="true" class="dropdown-toggle"
					href="dashboard_admin.html"
					data-bind="attr : { 'href' : '/EZOPSDashboardUI/'+ko.toJS(fileName)}">
						<i class="entypo-gauge"></i> <span data-bind="text : resourceId"></span>
				</a>
				</li>
				<!-- /ko -->
				<li><a href="#" data-target="#reportModal" data-toggle="modal"
					class=""> <i class="entypo-gauge"></i> File Management
				</a></li>
			</ul>
		</div>
		<div class="main-content reports">
			<div class="row">
				<!-- Profile Info and Notifications -->
				<div class="col-md-6 col-sm-8 "></div>
				<div class="col-md-6 col-sm-4 ">
					<ul class="list-inline links-list pull-right">
						<li><a href="" class="disabled"> <i
								class="entypo-cog right"></i> User Preferences
						</a></li>
						<li class="sep"></li>
						<li><a href="/EZOPSDashboardUI/"> Log Out <i
								class="glyphicon glyphicon-off  right"></i>
						</a></li>
					</ul>
				</div>
			</div>
			<hr />
			<div class="row">
				<div class="col-md-12">
					<div class="row">
						<div class="report-search">
							<div class="col-sm-6"></div>
							<div class="col-sm-6">
								<div class="row">
									<div class="col-sm-2"></div>
									<div class="col-sm-5">
										<label id="dateprint"> Reports as of : <span
											data-bind="text :ko.toJS(asOfDate)"></span></label>
										<!-- -------------------------- -->
									</div>
									<div class="col-sm-5">
										<div class="dropdown">
											<dt>
												<a href="#"> <span class="hida"> Report Settings
														<i class="entypo-down-open"></i>
												</span>
													<p class="multiSel"></p>
												</a>
											</dt>
											<dd>
												<div class="reportFilter">
													<ul style="height: 300px;">
														<li><a href="#" data-target="#reportRangeModal"
															onclick="setDateRangePicker()" id="openReportRange"
															data-toggle="modal" class=""> Date Range </a></li>
														<!-- ko foreach : reportList -->
														<li><input type="checkbox"
															data-bind="checked : reportCheck()[ko.toJS(category)] " />
															<span data-bind="text : reportDesc"></span></li>
														<!-- /ko -->
													</ul>
												</div>
											</dd>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="row">
						<div>
							<h1>Client: [Capita]</h1>
						</div>
						<table id="list">
							<tr>
								<td></td>
							</tr>
						</table>
						<div id="pager"></div>
					</div>
				</div>
			</div>
			<footer class="site-footer">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<div class="row">
							<div class="col-sm-2">
								<a class="disabled" href="" class="about">about us</a>
							</div>
							<div class="col-sm-2">
								<a class="disabled" href="" class="contact">contact us</a>
							</div>
							<div class="col-sm-4 center1">
								<p>Copyright &copy; 2014 by ezops. All rights reserved.</p>
							</div>
							<div class="col-sm-4">
								<div class="social-icon pull-right">
									<ul>
										<li><a href="" class="google disabled"></a></li>
										<li><a href="" class="linkdin disabled"></a></li>
										<li><a href="" class="twitter disabled"></a></li>
										<li><a href="" class="facebook disabled"></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</footer>
			<div id="loadUploadForms"></div>
			<link rel="stylesheet"
				href="<c:url value="/assets/js/daterangepicker/daterangepicker-bs3.css"/>">
			<link rel="stylesheet"
				href="<c:url value="/assets/js/rickshaw/rickshaw.min.css"/>">
			<script src="<c:url value="/assets/js/rickshaw/vendor/d3.v3.js"/>"></script>
			<script src="<c:url value="/assets/js/rickshaw/rickshaw.min.js"/>"></script>
			<script src="<c:url value="/assets/js/jquery.sparkline.min.js"/>"></script>
			<link rel="stylesheet"
				href="<c:url value="/assets/css/themes/base/jquery.ui.all.css" /> ">
			<script src="<c:url value="/assets/js/ui/jquery.ui.core.js" /> "></script>
			<script src="<c:url value="/assets/js/ui/jquery.ui.widget.js" /> "></script>
			<script src="<c:url value="/assets/js/ui/jquery.ui.mouse.js" />"></script>
			<script src="<c:url value="/assets/js/ui/jquery.ui.sortable.js" />"></script>
			<!-- Bottom Scripts -->
			<script src="<c:url value="/assets/js/gsap/main-gsap.js"/>"></script>
			<script
				src="<c:url value="/assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js"/>"></script>
			<script src="<c:url value="/assets/js/bootstrap.js"/>"></script>
			<script src="<c:url value="/assets/js/joinable.js"/>"></script>
			<script src="<c:url value="/assets/js/resizeable.js"/>"></script>
			<script src="<c:url value="/assets/js/neon-custom.js"/>"></script>
			<script src="<c:url value="/assets/js/neon-demo.js"/>"></script>
			<script src="<c:url value="/assets/js/neon-api.js"/>"></script>
			<script src="<c:url value="/assets/js/highcharts.js"/>"></script>
			<script src="<c:url value="/assets/js/exporting.js"/>"></script>
			<script
				src="<c:url value="/assets/js/daterangepicker/moment.min.js"/>"></script>
			<script
				src="<c:url value="/assets/js/daterangepicker/daterangepicker.js"/>"></script>
			<link rel="stylesheet" type="text/css" media="all"
				href="<c:url value="/assets/js/daterangepicker/daterangepicker-bs3.css" />" />
			<script type="text/javascript"
				src="<c:url value="/assets/js/daterangepicker/moment.js"/>"></script>
			<script type="text/javascript"
				src="<c:url value="/assets/js/daterangepicker/daterangepicker.js" />"></script>
			<head>
<script type="text/javascript">
	function loadForms() {
		$("#loadUploadForms").load("UploadForm");
		console.log("Forms loaded");
	}
	function setDateRangePicker() {
		$('#dateRange').val('Click to select Range...');
		$('#dateRange').daterangepicker({
			format : 'MM-DD-YYYY',
			separator : ' to ',
		});
	}
	// Add jS Dropdown plugin
	$(".dropdown dt a").on('click', function() {
		$(".dropdown dd ul").slideToggle('fast');
	});
	$(".dropdown dd ul li a").on('click', function() {
		$(".dropdown dd ul").hide();
	});
	function getSelectedValue(id) {
		return $("#" + id).find("dt a span.value").html();
	}
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (!$clicked.parents().hasClass("dropdown"))
			$(".dropdown dd ul").hide();
	});
	$(document).ready(function() {
		$('.reportFilter input[type="checkbox"]').on('click', function() {
			var panelId = $(this).val();
			if ($(this).is(':checked')) {
				$('#' + panelId).show('slow')
			} else {
				$('#' + panelId).hide('slow')
			}
		});
	});
	$("#select-values").click(function() {
		var option_all = $(".select1 option:selected").map(function() {
			return $(this).text();
		}).get().join(' ... ');
		console.log(option_all);
		var heading = 'Selected Mapping: ';
		$('#result').text(heading + option_all);
	});
	$("#select-values1").click(function() {
		var option_all = $(".select3 option:selected").map(function() {
			return $(this).text();
		}).get().join(' ... ');
		console.log(option_all);
		var heading = 'Selected Mapping: ';
		$('#result1').text(heading + option_all);
	});
</script>
			</head>
</body>
</html>